<template>
<div class="login-container">

    <div class="login-content">
        <div class="logo">
            <img src="@/assets/logo.png" alt="Logo" />
            <h2>BFX 资讯</h2>
        </div>

        <div class="login-form">
            <van-form @submit="onSubmit" :clickable="true" :rules="loginRules">
                <!-- 用户名/手机号字段 -->
                <van-field v-model="loginForm.username"  maxlength="20"  name="username" label="用户名" placeholder="请输入用户名/手机号"
                    autocomplete="username" />
                <!-- 密码字段 -->
                <van-field v-model="loginForm.password"  maxlength="20"  type="password" name="password" label="密码" placeholder="请输入密码"
                    autocomplete="current-password" />
                <!-- 图形验证码 -->
                <van-field v-if="captchaEnabled" v-model="loginForm.code" center maxlength="4" clearable label="验证码" placeholder="请输入图形验证码">
                    <template #button>
                        <div class="captcha-image-div" @click="getCode">
                            <img :src="codeUrl" class="captcha-image" @click="getCode" />
                        </div>
                    </template>
                </van-field>

                <!-- 辅助链接 -->
                <div class="form-links">
                    <span @click="$router.push('/register')">注册账号</span>
                    <span @click="$router.push('/forgot-password')">忘记密码</span>
                </div>

                <!-- 提交按钮 -->
                <div class="submit-btn">
                    <van-button round block type="primary" native-type="submit">
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                    </van-button>
                </div>
            </van-form>
        </div>

        <div class="other-login">
            <div class="divider">
                <span>其他登录方式</span>
            </div>

            <div class="login-methods">
                <div class="login-method" @click="thirdPartyLogin('wechat')">
                    <van-icon name="wechat" size="28" color="#07C160" />
                    <span>微信</span>
                </div>
                <div class="login-method" @click="thirdPartyLogin('qq')">
                    <van-icon name="qq" size="28" color="#12B7F5" />
                    <span>QQ</span>
                </div>
                <div class="login-method" @click="thirdPartyLogin('weibo')">
                    <van-icon name="weibo" size="28" color="#E6162D" />
                    <span>微博</span>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { getCodeImg } from '@/api/user'

export default {
    name: 'LoginPage',
    data() {
        return {
            loginForm: {
                username: "admin",
                password: "everhigh",
                rememberMe: false,
                code: "",
                uuid: ""
            },
            loginRules: {
                username: [
                    { required: true, trigger: "blur", message: "请输入您的账号" }
                ],
                password: [
                    { required: true, trigger: "blur", message: "请输入您的密码" }
                ],
                code: [{ required: true, trigger: "change", message: "请输入验证码" }]
            },
            // 图形验证码
            codeUrl: "",
            // 验证码开关
            captchaEnabled: false,
            // 注册开关
            register: false,
            loading: false,
            redirect: undefined
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect ? decodeURIComponent(route.query.redirect) : undefined;
            },
            immediate: true
        }
    },
    created() {
        this.getCode();
        this.getCookie();
    },
    methods: {
        // 获取图形验证码
        getCode() {
            getCodeImg().then(res => {
                this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
                if (this.captchaEnabled) {
                    this.codeUrl = "data:image/gif;base64," + res.img;
                    this.loginForm.uuid = res.uuid;
                }
            });
        },
        // 获取缓存
        getCookie() {
            const username = Cookies.get("username");
            const password = Cookies.get("password");
            const rememberMe = Cookies.get('rememberMe')
            this.loginForm = {
                username: username === undefined ? this.loginForm.username : username,
                password: password === undefined ? this.loginForm.password : decrypt(password),
                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
            };
        },
        // 登录
        onSubmit() {
            this.loading = true
            if (this.loginForm.rememberMe) {
                Cookies.set("username", this.loginForm.username, { expires: 30 });
                Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
                Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
            } else {
                Cookies.remove("username");
                Cookies.remove("password");
                Cookies.remove('rememberMe');
            }

            this.$store.dispatch("Login", this.loginForm).then(() => {
                // 提示登录成功
                this.$toast.success('登录成功')
                // 如果有重定向地址，则跳转到重定向地址，否则跳转到首页
                const redirectPath = this.redirect || "/"
                this.$router.push(redirectPath).catch(() => { });
            }).catch(err => {
                this.getCode();
                this.$toast.fail(err.message || '登录失败')
            }).finally(() => {
                this.loading = false
            })

        },
        // 第三方登录
        thirdPartyLogin(type) {
            this.$toast('暂未开放' + type + '登录')
        }
    }
}
</script>

<style scoped>
.login-container {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.login-content {
    padding: 20px;
}

.logo {
    text-align: center;
    margin: 30px 0;
}

.logo img {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    display: block;
    /* 转为块级元素 */
    margin-left: auto;
    /* 左外边距自动 */
    margin-right: auto;
    /* 右外边距自动 */
}

.logo h2 {
    margin-top: 10px;
    font-size: 24px;
    color: #333;
}

.login-form {
    margin-bottom: 30px;
}

.captcha-image-div {
    width: 75px;
    height: 24px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    /* 防止图片被压缩 */
}

.captcha-image {
    width: 75px;
    height: 24px;
}

.form-links {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    font-size: 14px;
    color: #1989fa;
}

.submit-btn {
    margin-top: 20px;
}

.divider {
    display: flex;
    align-items: center;
    margin: 30px 0;
    color: #969799;
    font-size: 14px;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #ebedf0;
}

.divider span {
    padding: 0 16px;
}

.login-methods {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.login-method {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-method span {
    margin-top: 8px;
    font-size: 12px;
    color: #646566;
}
</style>